<template>
    <div id="manage">
        <el-tabs v-model="pageQuery.status" @tab-click="getData">
            <el-tab-pane label="待审核" name="0">
            </el-tab-pane>
            <el-tab-pane label="审核通过" name="2">
            </el-tab-pane>
            <el-tab-pane label="审核不通过" name="1">
            </el-tab-pane>
        </el-tabs>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    width="300">
                <template slot-scope="scope">
                    <span>
                        {{scope.row.title}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="introduction"
                    label="简介"
                    width="400">
                <template slot-scope="scope">
                    <el-tooltip content="Bottom center" placement="bottom" effect="light">
                        <span>
                        {{scope.row.introduction}}
                    </span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
                    <el-button @click="deleteVideo(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination";
    import {selectVideoByUserId, deleteVideoById} from "@/api/videoFun";
    import {getStore} from "@/utils/util";
    import {Loading, Message, MessageBox} from 'element-ui';

    export default {
        name: "manage",
        data(){
            return{
                tableData: [],
                activeName: 'second',

                pageQuery: {
                    status: '0',
                    userId: '',
                    title: '',
                    pageIndex: 0,
                    pageSize: 10
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        // 注册组件
        components: {
            //分页组件
            Pagination
        },
        created(){
            let userInfo = getStore("userInfo");
            if (userInfo) {
                this.pageQuery.userId = userInfo.id
            }
          this.getData();
        },
        methods: {
            getData() {
                selectVideoByUserId(this.pageQuery).then(res=>{
                    if (res.status == 200) {
                        this.tableData = res.data.data.data
                        this.pageparm.total = res.data.data.totalCount
                    }
                })
            },
            handleClick(id) {
                this.$router.push({
                    path: '/videos/videoDetail',
                    query: {
                        videoId: id
                    }
                })
            },
            deleteVideo(id) {
                this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteVideoById({
                        id: id
                    }).then(res=>{
                        if (res.status == 200) {
                            Message.success(res.message);
                            this.getData();
                        }else{
                            Message.error(res.message);
                        }
                    })
                });
            },
            // 分页插件事件
            pageCallFather(param) {
                this.pageQuery.pageIndex = param.currentPage - 1;
                this.pageQuery.pageSize = param.pageSize;
                this.getData();
            },
        }
    }
</script>

<style>
    #manage{
        padding: 20px 20px 80px;
    }

    #manage .el-tabs__item{
        color: white;
    }
    #manage .el-tabs__item.is-active {
        color: #f3cd20;
    }
    #manage .el-tabs__active-bar {
        background-color: #f3cd20;
    }

    #manage .el-table th, .el-table .el-table__row {
        color: white;
        background: rgb(48, 49, 51);
    }
    #manage .el-table th, .el-table .el-table__row:hover {
        color: #67C23A;
    }
    #manage .el-table, .el-table__expanded-cell{
        background: rgb(48, 49, 51);
    }
</style>
